<script lang="ts" setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import PerfumeItem from "@/components/PerfumeItem.vue";
import {removeIngredientById} from '@/util/checkHasStore'
import axios from "axios";

const perfumeList = ref([])//符合的香水列表

const back = () => {
  router.push("/")
}
const ingredientList = ref([])//香料列表
const initIngredientList = async () => {
  ingredientList.value = JSON.parse(localStorage.getItem("Ingredient-data-list"))
}
const searchData = async () => {
  if(ingredientList.value.length == 0){
    loadingText.value = "请添加香料，即将前往香料页面"
    setTimeout(()=> {
        router.push("/ingredient")
    },300)
    return;
  }
  loadingText.value = "正在加载中，请稍等"
  const url = `/api/perfume/ings/query`
  let arr = []
  // console.log(ingredientList.value)
  ingredientList.value.forEach(el => {
    arr.push(el.ingredientId)
  })
  axios.post(url, arr, {
    headers: {
      token: localStorage.getItem("wiki-auth-token")
    }
  }).then(res => {

    // console.log(res)
    const msg = res.data.message
    perfumeList.value = msg
    if(res.data.success){
      if(perfumeList.value.length != 0){
        isLoading.value = false
      }else{
        loadText.value = "暂无香水记录，请减少香料试试？"
      }
    }
  })
}
//移除
const remoteIngredientById = async (id) => {
  await removeIngredientById(id)
  await initIngredientList()
  isLoading.value = true
  await searchData()
}
onMounted(async () => {
  await initIngredientList()
  isLoading.value = true
  await searchData()
})
// 更新收藏状态的方法
const handleUserCollect = (index: number, newStatus: boolean) => {
  perfumeList.value[index].userCollect = newStatus; // 更新收藏状态
};
const loadingText = ref('暂无香水记录，取消部分香料试试？')
const isLoading = ref(false)
</script>

<template>
  <div class="choose-perfume">
    <div class="top-back">
      <q-btn color="grey-4" icon="arrow_back_ios" outline round @click="back"/>
    </div>
    <div style="display: flex;width: 90vw;
  margin-left: 5vw;margin-right: 5vw;flex-direction: column">
      <view class="text-h4" style="margin-top: 20px;margin-bottom: 20px;">混合配料</view>
      <view class="text-body1">我们发现{{ perfumeList.length }}香水和您的选择一致</view>
    </div>
    <div class="ingredient-group">
      <div class="text-body1">所选成分（{{ ingredientList.length }}</div>
      <div class="ingredient-group-list">
        <q-img v-for="(item,index) in ingredientList" :key="index" :src="item.img"
               style="height: 70px;width: 170px;border-radius: 15px;margin-left: 20px;margin-right: 20px;margin-top: 20px;">
          <div class="absolute-full text-subtitle2 flex flex-center">
            {{ item.name }}
            <q-icon class="absolute all-pointer-events" color="red"
                    name="close" size="32px" style="right: 8px; top: 3px"
                    @click="remoteIngredientById(item.ingredientId)">
              <q-tooltip>
                移除
              </q-tooltip>
            </q-icon>
          </div>
        </q-img>

      </div>
    </div>
    <div class="perfume-group">
      <div class="text-h5">香水列表</div>
      <div class="perfume-group-list" style="display: flex;flex-wrap: wrap">
        <div v-show="isLoading" class="q-pa-md" style="width: 100%;">
          <div class="q-gutter-md">
            <view style="display: flex;align-items: center">
              <q-skeleton size="100px" type="circle"/>
              <view class="text-h4" style="margin-left: 30px;">{{loadingText}}</view>
            </view>
            <q-skeleton width="150px"/>
            <q-skeleton height="150px"/>
          </div>
        </div>
        <PerfumeItem
            v-show="!isLoading"
            v-for="(item,index) in perfumeList" :key="index"
            :brand-id="item.brandId"
            :brand-text="item.brandText" :fragrance-note="item.fragranceNote"
            :img="item.img"
            :ingredients="item.ingredients"
            :name="item.name"
            :perfume-id="item.perfumeId"
            :price="item.price"
            :smell="item.smell"
            :user-collect="item.userCollect"
            :year="item.year"
            @updateUserCollect="handleUserCollect(index, $event)"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.choose-perfume {
  width: 100vw;
  display: flex;
  flex-direction: column;

  .ingredient-group {
    margin-top: 50px;
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;

    .ingredient-group-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
    }
  }

  .perfume-group {
    margin-top: 50px;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;


  }

  .perfume-group-list {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
  }
}
</style>